<template>
  <div class="register-page">
    <div class="header">
      <el-icon><HomeFilled /></el-icon>
      <span class="title">选课管理系统 - 注册</span>
    </div>
    <div class="register-card">
      <el-card>
        <div class="register-title">
          <el-icon><User /></el-icon>
          <span>注册</span>
        </div>
        <el-form :model="form" :rules="rules" ref="registerForm" label-width="90px">
          <el-form-item label="用户id" prop="id" required>
            <el-input v-model="form.id" placeholder="请输入用户id" prefix-icon="el-icon-user" />
          </el-form-item>
          <el-form-item label="用户密码" prop="password" required>
            <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword" required>
            <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" prefix-icon="el-icon-lock" />
          </el-form-item>
          <el-form-item label="用户类型" prop="type" required>
            <el-select v-model="form.type" placeholder="请选择角色" style="width: 100%;">
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span :class="['icon', item.icon]"></span>
                <span style="margin-left: 8px">{{ item.label }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">注册</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button @click="goLogin">返回登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { HomeFilled, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const registerForm = ref(null)

const form = ref({
  id: '',
  password: '',
  confirmPassword: '',
  type: '' // 初始值为空，避免默认选中
})

const roleOptions = [
  { value: '学生', label: '学生', icon: 'el-icon-user' },
  { value: '老师', label: '老师', icon: 'el-icon-suitcase' }
]

const rules = {
  id: [{ required: true, message: '请输入用户id', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value !== form.value.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }, trigger: 'blur' }
  ],
  type: [{ required: true, message: '请选择用户类型', trigger: 'change' }]
}

const onSubmit = () => {
  registerForm.value.validate((valid) => {
    if (valid) {
      // 这里可以添加注册逻辑，如请求后端接口
      ElMessage.success('注册成功')
      router.push('/')
    }
  })
}

const onReset = () => {
  registerForm.value.resetFields()
}

const goLogin = () => {
  router.push('/')
}
</script>

<style scoped>
.register-page {
  min-height: 100vh;
  background-image: url(~@/assets/01.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.header {
  width: 100vw;
  height: 56px;
  background: #92e3f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  color: #222;
  letter-spacing: 2px;
}

.header .el-icon {
  margin-right: 10px;
  font-size: 28px;
}

.register-card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}

.el-card {
  width: 420px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  border-radius: 8px;
}

.register-title {
  text-align: center;
  font-size: 22px;
  margin-bottom: 18px;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-title .el-icon {
  margin-right: 8px;
  font-size: 22px;
}

/* 添加图标样式 */
.el-select-dropdown__item {
  display: flex !important;
  align-items: center !important;
  padding: 8px 15px !important;
}

.icon {
  margin-right: 8px;
  width: 24px;
  text-align: center;
}

.el-icon-user {
  color: #409EFF;
}

.el-icon-suitcase {
  color: #E6A23C;
}
</style>